<template>
    <div class="amplifier-container">
        <div class="amplifier-panel amplifier-panel-off"></div>
        <div class="amplifier-panel amplifier-panel-on" :style="{ opacity: isSwitchOn ? 1 : 0 }"></div>
        <div class="controls">
            <soloist-knob v-for="control in controls" :key="control.label" :label="control.label"
                :style="{ left: control.left, top: control.top }" @valueChange="handleKnobChange"
                :knobImage="control.image">
            </soloist-knob>
        </div>
        <div class="toggle-switch" :style="{ left: toggleSwitchPosition.left, top: toggleSwitchPosition.top }">
            <soloist-switch @switchToggle="handleSwitchToggle"></soloist-switch>
        </div>
    </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import SoloistKnob from './SoloistKnob.vue';
import SoloistSwitch from './SoloistSwitch.vue';
import soloKnobImage from '@/assets/slo.png';

export default {
    name: 'SoloistAmplifier',
    components: { SoloistKnob, SoloistSwitch },
    setup() {
        const controls = ref([
            { label: 'PREAMP', left: '25.3%', top: '68.5%', image: soloKnobImage, value: 0.5 },
            { label: 'BASS', left: '36.3%', top: '68.5%', image: soloKnobImage, value: 0.5 },
            { label: 'MIDDLE', left: '47.5%', top: '68.5%', image: soloKnobImage, value: 0.5 },
            { label: 'TREBLE', left: '58.7%', top: '68.5%', image: soloKnobImage, value: 0.5 },
            { label: 'PRESENCE', left: '69.8%', top: '68.5%', image: soloKnobImage, value: 0.5 },
            { label: 'MASTER', left: '80.95%', top: '68.5%', image: soloKnobImage, value: 0.5 }
        ]);

        const toggleSwitchPosition = ref({
            left: '15.2%',
            top: '66.3%',
            processorId: 2
        });

        const isSwitchOn = ref(true);

        const handleKnobChange = ({ label, value }) => {
            console.log(`Knob ${label} changed to ${value}`);
            const control = controls.value.find(c => c.label === label);
            if (control) {
                control.value = value;
            }
            window.electronAPI.sendKnobValue(label, value);
        };

        const handleSwitchToggle = (isOn) => {
            isSwitchOn.value = isOn;
            console.log(`Soloist switch is now ${isOn ? 'ON' : 'OFF'}`);
            console.log(`Sending bypass state for processor ${toggleSwitchPosition.value.processorId}: ${!isOn}`);
            window.electronAPI.setProcessorBypass(toggleSwitchPosition.value.processorId, !isOn);
        };

        const getCurrentState = () => {
            const state = {};
            controls.value.forEach(control => {
                state[control.label] = control.value;
            });
            state.switchState = isSwitchOn.value;
            console.log('Eddie51 current state:', state);
            return state;
        };

        return {
            controls,
            toggleSwitchPosition,
            isSwitchOn,
            handleKnobChange,
            handleSwitchToggle,
            getCurrentState
        };
    }
};
</script>

<style scoped>
.amplifier-container {
    width: 100%;
    height: 730px;
    position: relative;
    top: 10%;
    border-radius: 10px;
    overflow: hidden;
}

.amplifier-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 3s ease;
}

.amplifier-panel-off {
    background-image: url('@/assets/Soloist 100.png');
}

.amplifier-panel-on {
    background-image: url('@/assets/Soloist 100_ON.png');
}

.controls {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.custom-knob-size {
    width: 10px;
    /* 调整为所需的宽度 */
    height: 60px;
    /* 调整为所需的高度 */
}

.toggle-switch {
    position: absolute;
    z-index: 1;
}
</style>